<template>
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item">任务处理记录</view>
					<view class="flex-item" style="position: absolute;top: 0;top: 20px;right: 22px;">选择维护规程</view>
				</uni-nav-bar>
			</view>
			<view>
				<view class="turn-content">
					<view class="content-detail">
						<view class="content-words">是否故障维修</view>
						<view class="records-words">是</view>
						<view class="content-right"><image src="../../static/images/righticon.png" mode=""></image></view>
					</view>
					<view class="content-detail">
						<view class="content-words">替换零件</view>
						<view class="records-words">零件1</view>
						<view class="content-right"><image src="../../static/images/righticon.png" mode=""></image></view>
					</view>
					<view class="content-detail"><view class="content-words">维护内容</view></view>
					<view class="processing-words">
						季保养 1 检查泵房及设备卫生和机房照明并做机房及设备外观清洁、机座和支撑架除锈、紧固等 2 检查设备标识，流体标识等完整情况 3
						检查各水管、阀门、电机等设施设备的功能及外观，适时补漆 查电机绝缘 22 阀设...
					</view>
				</view>
				<view class="records_tj">提交</view>
				<view class="processing_tj">提交并生成维护规程</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';

export default {
	components: {
		uniNavBar,
		uniIcon
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #F2F2F2;
}

.flex-item {
	font-size: 20px;
	text-align: center;
}

.uni-icon {
	padding-left: 42%;
}	

.uni-navbar__header-btns{
	padding: 0;
}

.uni-navbar__header-btns:last-child{
	width: 120px;
}

.turn-content {
	width: 94%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	overflow: hidden;
	border-radius: 3px;
}

.turn-content .content-detail {
	width: 94%;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 auto;
	position: relative;
	padding: 30px 0px;
}
.content-detail .content-words {
	font-size: 14px;
	color: #666666;
	position: absolute;
	left: 0px;
	top: 20px;
}

.content-detail .content-right {
	width: 7px;
	height: 11px;
	position: absolute;
	top: 24px;
	right: 0px;
}

.content-detail .content-right image {
	max-width: 100%;
	max-height: 100%;
}

image {
	display: inherit;
}

.records-words {
	position: absolute;
	right: 22px;
	top: 20px;
	font-size: 14px;
	color: #333333;
}

.processing-words {
	font-size: 13px;
	color: #999999;
	padding: 15px 24px;
}

.records_tj {
	width: 94%;
	height: 44px;
	color: #ffffff;
	font-size: 15px;
	line-height: 44px;
	text-align: center;
	background-color: #458cd0;
	border-radius: 3px;
	margin: 0 auto;
	position: absolute;
	bottom: 100px;
	left: 0;
	right: 0;
}

.processing_tj {
	width: 94%;
	height: 44px;
	color: #458cd0;
	font-size: 15px;
	line-height: 44px;
	text-align: center;
	border: 1px solid #458cd0;
	border-radius: 3px;
	margin: 0 auto;
	position: absolute;
	bottom: 42px;
	left: 0;
	right: 0;
}
</style>
